<template>
    <div class="yanhua">
        <canvas class="yanhua" ref="confettiCanvas"></canvas>
        <div id='main'>
            <div  class="itemnum" ><span>.</span></div>
            <div  v-for="val in numberArr" :key="val">
                <div style="width:50px;height:80px">
                    <div class="numberScrollPar">
                        <div v-for="i in 10" :key="i">
                            <div class="child">{{ i - 1 }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import confetti from 'canvas-confetti';

export default {
    data() {
        return {
            numberArr: [0,0,0]
        }
    },
    methods: {
        startConfetti() {
            confetti.create(this.$refs.confettiCanvas, {
                resize: true,
                useWorker: true,
            })({ particleCount: 200, spread: 200 });
        },
    },
    mounted() {

        this.startConfetti()
        this.numberArr[0] = 1;
        this.numberArr[1] = 2;
        this.numberArr[2] = 3;
        // this.numberArr = [1,2,3]
        
        const element = document.getElementsByClassName('numberScrollPar');
        for (let i = 0; i < element.length; i++) {
            const name = 'numberScroll_' + this.numberArr[i];
            element[i].classList.add(name);
        }
    }
};
</script>
<style >
.yanhua {
    width: 100%;
    height: 100%;
    position: relative;
}

#main {
    width: 70%;
    height: 80px;
    z-index: 4;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100px;
    /* background: white; */
    color: rgba(255, 0, 0, 0.673);
    font-size: 78px;
    overflow: hidden;
    display: flex;
    justify-content: center;
}
.itemnum{
    position: relative;
    left: 56px;
}
.numberScrollPar {
    width: 100%;
    height: 100%;
}

.child {
    width: 40px;
    height: 80px;
    line-height: 80px;
    text-align: center;
}

@keyframes numberScroll1
{
  from {transform:translateY(0px);}
  to {transform:translateY(-80px);}
}
@-webkit-keyframes numberScroll1
{
  from {transform:translateY(0px);}
  to {transform:translateY(-80px);}
}
.numberScroll_1{
  animation:numberScroll1 0.5s;
  -webkit-animation:numberScroll1 0.5s;
  animation-fill-mode: both;
}

@keyframes numberScroll2
{
  from {transform:translateY(0px);}
  to {transform:translateY(-160px);}
}
@-webkit-keyframes numberScroll2
{
  from {transform:translateY(0px);}
  to {transform:translateY(-160px);}
}
.numberScroll_2{
  animation:numberScroll2 1s;
  -webkit-animation:numberScroll2 1s;
  animation-fill-mode: both;
}

@keyframes numberScroll3
{
  from {transform:translateY(0px);}
  to {transform:translateY(-240px);}
}
@-webkit-keyframes numberScroll3
{
  from {transform:translateY(0px);}
  to {transform:translateY(-240px);}
}
.numberScroll_3{
  animation:numberScroll3 1.5s;
  -webkit-animation:numberScroll3 1.5s;
  animation-fill-mode: both;
}

@keyframes numberScroll4
{
  from {transform:translateY(0px);}
  to {transform:translateY(-320px);}
}
@-webkit-keyframes numberScroll4
{
  from {transform:translateY(0px);}
  to {transform:translateY(-320px);}
}
.numberScroll_4{
  animation:numberScroll4 2s;
  -webkit-animation:numberScroll4 2s;
  animation-fill-mode: both;
}

@keyframes numberScroll5
{
  from {transform:translateY(0px);}
  to {transform:translateY(-400px);}
}
@-webkit-keyframes numberScroll5
{
  from {transform:translateY(0px);}
  to {transform:translateY(-400px);}
}
.numberScroll_5{
  animation:numberScroll5 2.5s;
  -webkit-animation:numberScroll5 2.5s;
  animation-fill-mode: both;
}

@keyframes numberScroll6
{
  from {transform:translateY(0px);}
  to {transform:translateY(-480px);}
}
@-webkit-keyframes numberScroll6
{
  from {transform:translateY(0px);}
  to {transform:translateY(-480px);}
}
.numberScroll_6{
  animation:numberScroll6 1.2s;
  -webkit-animation:numberScroll6 1.2s;
  animation-fill-mode: both;
}

@keyframes numberScroll7
{
  from {transform:translateY(0px);}
  to {transform:translateY(-560px);}
}
@-webkit-keyframes numberScroll7
{
  from {transform:translateY(0px);}
  to {transform:translateY(-560px);}
}
.numberScroll_7{
  animation:numberScroll7 1.4s;
  -webkit-animation:numberScroll7 1.4s;
  animation-fill-mode: both;
}

@keyframes numberScroll8
{
  from {transform:translateY(0px);}
  to {transform:translateY(-640px);}
}
@-webkit-keyframes numberScroll8
{
  from {transform:translateY(0px);}
  to {transform:translateY(-640px);}
}
.numberScroll_8{
  animation:numberScroll8 1.6s;
  -webkit-animation:numberScroll8 1.6s;
  animation-fill-mode: both;
}

@keyframes numberScroll9
{
  from {transform:translateY(0px);}
  to {transform:translateY(-720px);}
}
@-webkit-keyframes numberScroll9
{
  from {transform:translateY(0px);}
  to {transform:translateY(-720px);}
}
.numberScroll_9{
  animation:numberScroll9 1.8s;
  -webkit-animation:numberScroll9 1.8s;
  animation-fill-mode: both;
}</style>